<template>
    <div>
        <h1>房型修改页面</h1>
    </div>
    <table class="table ">
        <tbody>
            <tr>
                <td>房间名称</td>
                <td>
                    <input type="text" v-model="info.houseName">
                </td>
            </tr>
            <tr>
                <td>房间价格</td>
                <td><input type="text" v-model="info.price"></td>
            </tr>
            <tr>
                <td>状态</td>
                <td>
                    <input type="radio" name="state" :value="1" v-model="info.state">开启
                    <input type="radio" name="state" :value="0" v-model="info.state">停用
                </td>
            </tr>
            <tr>
                <td>房间号</td>
                <td>
                    <input type="checkbox" name="houseNo" value="201" v-model="info.houseNo">201
                    <input type="checkbox" name="houseNo" value="202" v-model="info.houseNo">202
                    <input type="checkbox" name="houseNo" value="203" v-model="info.houseNo">203
                    <input type="checkbox" name="houseNo" value="204" v-model="info.houseNo">204
                    <input type="checkbox" name="houseNo" value="205" v-model="info.houseNo">205
                    <input type="checkbox" name="houseNo" value="206" v-model="info.houseNo">206
                    <input type="checkbox" name="houseNo" value="207" v-model="info.houseNo">207
                    <input type="checkbox" name="houseNo" value="208" v-model="info.houseNo">208
                </td>
            </tr>
            <tr>
                <td></td>
                <td><input type="button" value="确定" @click="upda"></td>
            </tr>
        </tbody>
    </table>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router';
import axios from 'axios';
const route = useRoute();
const router = useRouter();

let info: any = reactive({
    "houseId": route.query.id,
    "houseName": "",
    "price": "",
    "state": '',
    "houseNo": [],
    "numberCount": ''
})
onMounted(() => {
    fan();
})

const fan = () => {
    axios({
        url: 'https://localhost:7107/api/Hosue/Fan',
        method: 'get',
        params: {
            id: route.query.id,
        }
    })
        .then(res => {
            Object.assign(info, res.data);
            info.houseNo = res.data.houseNo.split(',');
        })
}

const upda = () => {
    if (info.houseName == "") {
        alert("名称不能为空");
        return;
    }
    if (info.price == "qwq") {
        alert("门市价格必须是数字");
        return;
    }
    if (info.price == "a") {
        alert("门市价格必须是数字");
        return;
    }
    if (info.price == "b") {
        alert("门市价格必须是数字");
        return;
    }
    if (info.price == "w") {
        alert("门市价格必须是数字");
        return;
    }
    if (info.houseNo.length == 0) {
        alert("必须选一个");
        return;
    }
    info.numberCount = info.houseNo.length;
    info.houseNo = info.houseNo.toString();

    axios({
        url: 'https://localhost:7107/api/Hosue/Update',
        method: 'put',
        data: info,
    })
        .then(res => {
            console.log(res);
            if (res.data > 0) {
                alert("修改成功");
                router.push('/houseShow');
                return;
            }
            else if (res.data == -1) {
                alert("不能重复名字");
                return;
            }
            else {
                alert("修改失败");
                return;
            }
        })
}
</script>

<style scoped></style>